با قسمت چهارم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت مطالب زیر را با هم بررسی خواهیم کرد:

مفهوم کامنت و لزوم استفاده از آن
کاراکترها وسمبل ها و نحوه استفاده در XHTML
نقطه شروع برای هر وب سایتی
لینک برای ارسال ایمیل
درج تصاویر در سند

نظم در برنامه نویسی ارزش بالایی دارد به طوری که می بایست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نویس دیگری باشد. یکی از ابزارهایی که در این زمینه به ما کمک می کند گذاشتن کامنت است.
کامنت در واقع نوشته هایی است که در سورس برنامه وجود دارند ولی در نمایش خروجی ظاهر نمی شوند . کامنت گذاری در HTML و CSS و JavaScript کاربرد زیادی دارند. به مثال زیر دقت کنید:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



content="text/html; charset=utf-8"/>

I really, really like this XHTML stuff.

blockquote>
و خروجی بدین صورت است:


در واقع با کامنت توضیح داده است که چرا از تگ em استفاده کرده است. کامنت گذاری در HTML بیشتر برای جدا کردن قسمت های مختلف وب سایت می باشد به طور مثال قسمت منو را با کامنت مشخص می کنیم و می گویم مثلا این قسمت از HTML برای منو است.

نحوه نوشن کامنت در HTML بدین صورت است:

در جاوا اسکریپت به 2 صورت زیر صورت :

/* comment */
// comment

و در CSS :

/* comment */

بگذارید یک ذره جلوتر برویم و یک استفاده حرفه ای تر کامنت را هم براتون توضیح بدهم :

استفاده دیگر کامنت زمانی است که می خواهید قسمتی از کد خودتونو نمایش ندید و یا برای مدتی پنهان کنید در آن زمان است که قسمت مربوطه را کامنت می کنید که بعدا هم قابل برگشت است .

Current Stock

The following items are available for order:

<

برچسب: نویسنده: وب پویا تاريخ: شنبه 14 ارديبهشت 1392 ساعت: 14:07

فصل دوم

Your First Web Pages

در اين فصل شما مي توانيد اولين صفحه وب خودتان را خلق نماييد و با XHTM آشنا خواهيد شد و مرحله به مرحله كارهاي خود را در مرورگر تست ميكنيد .
بگذاريد دقيق شويم ! طراحي وب سايتی كه شما مي بينيد به سه لايه اصلي تقسيم مي شود:

يادگيري اين سه لايه شما را به يك طراح تبديل ميكند!

لايه اول لايه محتوي است كه مانند شاسي ماشين است و شامل تگهاي متفاوتي مي باشد .لايه دوم لايه نمايش است كه به عناصر HTML شكل و ظاهر مي دهد و لايه سوم لايه رفتار است كه حركت و پويايي صفحات را شامل مي شود.
چيزي كه در اين كتاب آموزش داده مي شود مربوط به 2 لايه HTML و CSS است.

ديدن Source برنامه:

ديدن كد برنامه مي تواند به يادگيري شما سرعت ببخشد البته بايد در انتخاب وب سايت خود دقت نماييد تا اشتباه آنها مسير يادگيري شما را تغيير ندهد. روش كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source يا view source را بزنيد.
بايد صفحه اي مانند زير در فايرفاكس ببينيد:

يا در IE

عناصر اصلي يك صفحهHTML :

یک DocType
یک tag
یک tag
یک

حالا مي خواهيم با تك تك اين عناصر آشنا شويم :

داك تايپ DocType : Document Type Definition

اولين آيتم صفحه است بدون فاصله. اين يك قانون است.همانطوري كه فايل word 2007 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.
در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.
داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5 كه به تازگي مطرح شده است.
براي ديدن داك تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

به کدهای داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهاني وب World Wide Web Consortium یا W3C ، اشاره كند کدام است.
در حال حاضر دو نوع داكتايپ هستند كه استفاده بيشتري دارند Transitional و Strict
همانطوري كه گفتم فعلا دنبال تفاوت اين داك تايپ ها نباشيد به آن هم خواهيم رسيد .
تاكيد ميكنم : اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

عناصر HTML :

قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد

تگ HTML
تگ HEAD

تگ ها مي توانند شامل چند attribute (ویژگی) باشند:

http://www.w3.org/1999/xhtml " dir="rtl" >

dir يك نام attribute است و rtl ، value (مقدار) آن است كه بين " " قرار گرفته است.

تگ ها به دودسته container و empty تقسيم مي شوند.تگ هاي container شامل يك تگ بازشونده و يك تگ بسته شونده هستند به مثال بالا دقت نماييد HTML باز شده و بسته شده است. تگهاي empty متفاوت هستند مانند مثال زير

تگ هاي empty را مي توان به صورت container استفاده كرد ولي در داك تايپ هاي xhtml توصيه شده است كه تگ هاي empty را به همان شكل empty بنويسيم
در استفاده از تگ ها بايد دانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنويسيم دچار error می شویم.
نگران نباشيد كم كم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو كنيم :

empty tag in html

بسيار عالي شما هم اين نتايج را پيدا كرديد :

اين را گفتم كه هيچ وقت دنياي وب و جستجو را فراموش نكنيد.

غير از داك تايپ ها تمامي عناصر صفحه داخل تگ HTML است كه شامل 2 بخش مي شود head و body

عنصر HAED

اين يك تگ container است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css و .....

عنصر title :

يك تگ container است كه متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :

به تایتل درسایت بنده توجه کنید :

موارد استفاده ديگر:

• اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است
• در زمان بوكمارك كردن صفحه با اين عنوان در ليست ما ذخيره مي شود
• براي معرفي آن صفحه است
• براي موتورهاي جستجو هم حائز اهميت مي باشد چیزی که در بهینه سازی وب سایت وب اسکالا هم استفاده شده است

عنصر meta :

متا تگ يك تگ empty است و براي دلايل متفاوتي استفاده مي شوند اطلاعات اضافي كه در مرورگر نمايش پيدا نمي كند . به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ....
Css و javascript هم در head قرار ميگيرند كه بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي در طراحی های حرفه ای قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است.

عناصر body :

هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......
در قسمت بعدي به طور عملي با هم يك وب سايت مي سازيم!

ادامه دارد اگر مورد استقبال قرار گیرد!

آموزش توسط بهزاد علی بیگی www.alibeigi.com

این دوره آموزسی بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint می باشد.

چه کسانی باید این کتاب را بخوانند؟

این کتاب برای کسانی مفید است که از طراحی سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود .
این کتاب شما را با HTML و CSS آشنا میکند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد. ذکر این نکته لازم است که ترجمه خط به خط کتاب ارائه نمی شود و چیزی که به عنوان برداشت شخصی من یک طراح سایت (بهزاد علی بیگی) از کتاب می باشد در قالب مقالات آموزشی برای شما بیان خواهد شد.
سعی می کنم در هر مقاله حداکثر یک فصل از کتاب را آموزش دهم و مسلما با بازخوردی که از خوانندگان خواهم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهم داد.


این فصل در واقع آماده کردن کامپیوتر برای کار، قبل از زدن اولین طرح شماست.
قبل از این که وب سایت خودتان را بسازید، می بایست کامپیوتر خود را برای کار آماده نمایید که شامل برنامه هایی است که یا در سیستم شما موجود می باشد و یا این که می بایست آن ها را نصب نمایید.
برنامه های زیادی در بازار موجود می باشد ولی در ابتدا از برنامه های رایگان و قابل دسترس استفاده می کنیم.
وسایل و برنامه های اصلی که شما نیاز دارید:

1- وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود
2- یک مرورگر (web browser) برای دیدن صفحات وب در آن
3- فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client

چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد.

ابزارهای اولیه در ویندوز:

1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است .
برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:

Start > All Programs > Accessories > Notepad

2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Inteet Explorer در دسترس است.
شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید.



3- برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.

ابزارهای دیگر:

برای ادیت کردن صفحات خود می توانید از برنامه NoteTab استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.


آن را از این آدرس دانلود نمایید.

همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Inteet Explorer توصیه می کنم. اما در اینجا از یکی از بهترین آنها را نام می برم : firefox



اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید:
Adobe photoshop
Adobe fireworks
Picasa
توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آن برای کاربرد وب آسان است.

مرحله آخر - درست کردن مکانی است برای فایل های ساخته شده :

بعد از ساختن فایل های خود مدیریت آنها بسیار مهم است و این که در کجا فایل اصلی و در کجا تصاویر قرار گیرد و به همین ترتیب تمام عناصر وب سایت.
شما باید یک فولدر بسازید و تمام عناصر وب سایت خود را در آن قرار دهید. فرض کنید در دسکتاپ خود می خواهید یک وب سایت بسازید.

Right click > new > folder

سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,..... را داخل آن قرار می دهید.

نگران نباشید با هم پیش میریم و به همه موارد خواهیم رسید.
در فصل بعد شما اولین وب سایت خودتان را می سازید.

ادامه دارد اگر مورد استقبال قرار گیرد!

آموزش توسط بهزاد علی بیگی www.alibeigi.com

وبلاگ چييست و وبلاگ نويسي يعني چه؟
وبلاگ يك يا چندين صفحه اينترنتي شخصي يا گروهي است كه در آن شخص يا گروه به نوشتن مطالب متوالي (روزانه يا چند روز در ميان) در موضوعات متنوع و دلخواه مي پردازند. و افكار ، عقايد اشعار و يا خاطرات خود را براي مطالعه عموم در آن قرار مي دهند .

Aliceblue #F0F8FF Antiquewhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 Blanchedalmond #FFEBCD Blue #0000FF Blueviolet #8A2BE2 Brown #A52A2A Burlywood #DEB887 Cadetblue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 Coflowerblue #6495ED Cosilk #FFF8DC Crimson #DC143C Cyan #00FFFF Darkblue #00008B

كمی به كد كوتاه ارایهشده دقت كنید از این كد چه میفهمید خوب البته اگر یك طراح وب باشید بدون شكمیگویید این یك كد بسیار بسیار ساده ی اچ تی ام ال است

در واقع كد بالا حداقلملزمات یك صفحه ی اینترنتی است و شاید هیچ صفحه ی در اینترنت پیدا نكنید كه در آناز كد بالا استفاده نشده باشد . تقریبا همه ی صفحات اینترنتی به شكلی از اچ تی ام النوشته میشوند حتی زبانهای دیگر هم در خود بشكل توكار از این زبان برای نمایشصفحاتشان استفاده میكنند مثلا پی اچ پی كه یكی دیگر از زبانهای متداول خلق صفحاتوب است از اچ تی ام ال برای نمایش محتویات و وظایفش به كاربر استفاده میكند و اگراچ تی ام ال نبود مرورگرهای ما قادر به نمایش صفحات نبودند حال من به توضیحاتیدرباره ی اچ تی ام ال میپردازم تا شما با این زبان در حد اطلاعات عمومی مورد نیازیك وبلاگ نویس آشنا شوید و بدیهی است كه آموزش اچ تی ام ال در این مقاله ی كوچكنمیگنجد

< abbr >

براي ايجاد يک مخفف براي يک عبارت بزرگتر به کار مي رود .

< dd >

براي ايجاد ليست هاي معني به کار مي رود .

Attribute	Example	کاربرد
size="number"	size="2"	تعيين اندازه قلم
size="+number"	size="+1"	افزايش اندازه قلم
size="-number"	size="-1"	کاهش اندازه قلم
face="face-name"	face="Times"	تعيين نام قلم
color="color-value"	color="#eeff00"	تعيين رنگ قلم
color="color-name"	color="red"	تعيين رنگ قلم

در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهاي خالي است، بدين معنا که فقط داراي يک يا چند شناسه و attribute بوده و داراي تگ انتهائي يا <img/> نيست.

مجموعه ای از فایلهای مختلف اعم از تصاویر، متون و یا فایلهای برنامه نویسی شدهاست که به منظوری خاص به شکلی با هم مرتبط شده اند. این فایلها روی یک کامپیوتر"میزبان" یا "سرور" قرار می گیرند و با یک نام دامنه مشترکفراخوانی می شوند.

رو اعصاب تر از اونایی که وقتی از تاکسی پیاده میشن تازه جیباشونو میگردن که کرایه رو بدن ؛ اونایین که بعد دو دقیقه گشتن اسکناس ۵ تومنی میدن !!!

یک API رابط پیاده سازی توسط نرم افزار است که به دیگر برنامه ها اجازه می دهد با آن ارتباط داشته باشند.

سالهاست که ما عادت کردهایم مطالبمان را تایپ کنیم، یک زمانی این طور نبود، یک دهه پیش، بیشتر دانشجوها، پایاننامههای خود را روی کاغذ مینوشتند و بعد برای تایپ به تایپیست میدادند، الان فکر کنم کمتر چنین پدیدهای را شاهد باشیم، مگر اینکه از نظر تکنیک نگارش و صفحهآرایی کسی بخواهد از از یک تایپیست حرفهای کمک بگیرد.

با آمدن گوشیهای هوشمند و اپلیکیشنها اوضاع بدتر از این هم شده است، من هنوز عادت دارم برای یاداشت کارهای ضروری از استیکی نوتها استفاده کنم، همان کاغذهای کوچکی که میشود رویشان یادداشت کرد و روی مانتیور، یخچال، آینه و .. چسباند. اما خیلیها هم هستند که دلبسته اپلیکیشنهای مشابه شدهاند و همه کارهایشان را با این اپلیکیشنها نظم میدهند.

اما آیا نوشتن سنتی، واقعا هیچ فایده عملی دارد، یا اینکه کاری است که بعضیها به مقتضای عادت، هنوز انجام میدهند.

۱- با نوشتن با قلم و کاغذ، بهتر میتوانید یاد بگیرید: یکی از روشهای برتر برای یادگیری و به خاطرسپاری مطالب، نوشتن خلاصه مطالب و کلمات کلیدی است. وقتی با قلم روی کاغذ مینویسید، بخشی از مغز شما به نام مرکز فعالکننده مشبک یا Reticular Activating Center یا به اختصار RAS فعال میشود.

این RAS، فیلتری برای همه چیزهایی است که مغز شما میخواهد پردازش کند. با نوشتن به موضوع اهمیت بیشتری میدهید و در نتیجه بیشتر در حافظهتان باقی میماند.

در سال ۲۰۱۰ تحقیقی در این مورد انجام شد و مشخص شد که وقتی از کودکان خواسته میشود، چیزی را بنویسند، مراکز یادگیریشان نسبت به زمانی که فقط آن را میبینند، بیشتر فعال میشوند.

۲- نوشتن سنتی، از شما نویسنده بهتری میسازد: با وجود اینکه ماشین تحریرها و کامپیوترها در دسترس همه قرار کرفتهاند، هنوز هم بسیاری از نویسندگان نوشتن با قلم و کاغذ را ترجیح میدهند.

سال ۱۹۹۵، سوزان سانتاگ در مصاحبهای که با نشریه Paris Review گفت که اولین پیشنویس خود را همیشه با کاغذ و قلم می نویسد و بعد برای ویرایشهای بعدی تایپ میکند. او گفت که تأمل و آهستگیای که نوشتن سنتی دارد را دوست دارد.

ترومن کاپوتی هم علاقه مشابهی داشت، او البته همیشه در هنگام نوشتن قوه و سیگارش هم کنارش بود! او هم نخستین پیشنویس مطالبش را با کاغذ و قلم مینوشت. (+)

در پژوهشی که در سال ۲۰۰۹، توسط دانشگاه واشنگتن انجام شد، مشخص شد آن دسته از دانشآموزان مدارس ابتدایی که به کاغذ و قلم انشاء مینویسند، نسبت با بقیه، مقالات طولانیتری مینویسند و علاوه بر آن از جملات کاملتری استفاده میکنند و حتی سریعتر هم مطلب مینویسند.

۳- نوشتن از حواسپرتی جلوگیری میکند: از وقتی که شبکههای اجتماعی آمدند، میزان وبلاگنویسی به شدت کم شد. دلیلش تنها محبوبیت شبکههای اجتماعی نیست، بلکه یک دلیل عمده هم حواسپرتی وبلاگنویسها در جلوی کامپیوترهاست. سابق بر این، وقتی شبکههای اجتماعی نبودند، وبگردی عبارت بود از چک کردن ایمیل، دیدن وبلاگها و سایتهای مورد علاقه و وبلاگ نوشتن، اما حالا چیزهایی دیگری مثل چک کردن مطالب فرندفید، توییتر، گوگل پلاس، اینستاگرام، فیسبوک هم اضافه شده است.

درست به همین خاطر است که برنامههایی مثل Facebook Limiter و Minutes Please نوشته شدهاند تا بلکه دمی شبکههای اجتماعی راحتمان بگذارند!

البته اشتباه نکنید، شبکههای اجتماعی کلا چیز بدی نیستند، مطابق تحقیقی که دانشمندان علوم اعصاب در سال ۲۰۱۲ انجام دادند، مشخص شد که استراحتهای کوتاه پنج دقیقهای در هنگام کار و چک کردن مطالب شبکههای اجتماعی در این فرصتها، میتواند بر میزان کارایی کارمندان بیفزاید.

اما اگر واقعا میخواهید روی کاری متمرکز شوید، بهتر اصلا پشت کامپیوتر نباشید، کاغذی بردارید و شروع کنید به نوشتن!

۴- نوشتن مغزتان را جوان نگه میدارد: نوشتن در حکم ورزشی برای مغز است. بعضی از پزشکان عقیده دارند که نوشتن با قلم و کاغذ، فعالیتهای حرکتی، حافظه و اعمال شناختی را تقویت میکند و باعث میشود با افزایش سن و سال، مغزتان همچنان جوان باقی بماند.

بر اساس تحقیقی که در نتایج آن در مجله Cognitive Neuroscience در سال ۲۰۰۸ منتشر شد، مشخص شد که اگر شخصی عبارات چینی، علایم موسیقی یا نشانههای ریاضی را با دست بنویسد، نسبت به زمانی که همین عبارات را با کامپیوتر نوشته باشد، سریعتر میتواند آنها را تشخیص بدهد و شناسایی کند.